<template>
  <!-- 卡片视图 -->
  <div class="main" style="position: relative;">
    <el-row :gutter="15">
      <el-col :span="4" style="height: 84vh;display: inline-block;">
        <el-card class="leftBox" :body-style="{padding: '0px'}">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="按频道查看" name="1">
              <div class="selectArea">
                <el-tree
                  accordion
                  ref="treethree"
                  :data="optionsChannel"
                  :expand-on-click-node="false"
                  node-key="id"
                  :default-expanded-keys="['']"
                  :props="{ children: 'children', label: 'channel_name', type: 'use_channel' }"
                  @node-click="handleTypeClick">
                </el-tree>
              </div>
            </el-collapse-item>
<!--            <el-collapse-item title="按服务器查看" name="2">
              <div class="selectArea">
                <el-tree
                  ref="treetwo"
                  :data="optionsSystem"
                  :expand-on-click-node="false"
                  node-key="value"
                  :default-expanded-keys="['all']"
                  :props="{ children: 'children', type: 'system' }"
                  @node-click="handleTypeClick">
                </el-tree>
              </div>
            </el-collapse-item> -->
            <el-collapse-item title="按类型查看" name="3">
              <div class="selectArea">
                <el-tree
                  ref="treeone"
                  :data="optionsType"
                  :expand-on-click-node="false"
                  node-key="mat_type_id"
                  :default-expanded-keys="[1]"
                  :props="{ children: 'children', label: 'mat_type_name', type: 'mat_type' }"
                  @node-click="handleTypeClick">
                </el-tree>
              </div>
            </el-collapse-item>
          </el-collapse>
<!--          <div class="selectArea" style="padding: 15px 0;">

          </div> -->
        </el-card>
      </el-col>
      <el-col :span="20">
          <el-card style="max-height: 84vh;">
            <el-row :gutter="20" v-if="drawerVisible" style="margin-bottom: 15px;">
              <el-col :span="24">
                <el-cascader
                  style="margin-right: 10px;"
                  v-model="queryInfo.status"
                  :options="optionsStatus"
                  placeholder="按分类"
                  :show-all-levels="false">
                </el-cascader>
                <div class="elInputM" style="display: inline-block;">
                  <el-input placeholder="请输入素材名称" v-model="queryInfo.query" class="input-with-select" :clearable="true" @clear="getmaterialList">
                    <el-button slot="append" icon="el-icon-search" @click="getmaterialList"></el-button>
                  </el-input>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="box-shadow: none !important;">
              <el-col :span="20">
                <el-button type="primary" v-permission="permission.edit" icon="el-icon-edit" @click="editBeforeOpenDialog(handleCheckboxRows[0])" :disabled="handleCheckboxRows.length !== 1">编辑</el-button>
                <el-button type="success" v-permission="permission.add" icon="el-icon-document-copy" @click="copyCurrMatrial(handleCheckboxRows[0])" :disabled="handleCheckboxRows.length !== 1">复制</el-button>
                <el-button type="danger" v-permission="permission.del" icon="el-icon-delete" @click="delCheckMaterial(handleCheckboxRows)" :disabled="handleCheckboxRows.length < 1">删除</el-button>
              </el-col>
              <el-col :span="4" style="float: right; text-align: right;">
                <table-tools
                  :drawerSearch="drawerVisible"
                  @searchchange="searchChange"
                  @refreshclick="refreshClick">
                </table-tools>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24" style="height: 75vh;">
                <!-- 列表区域 -->
                <el-table
                  v-loading="loading"
                  :data="materialList"
                  highlight-current-row
                  @current-change="rowsCurrentChange"
                  @selection-change="handleSelectionChange"
                  @row-contextmenu="mouseRightUp"
                  @row-dblclick="rowsdbClick"
                  ref="table"
                  height="62vh"
                  max-height="85vh"
                  border
                  stripe
                  @sort-change="handleSortChange"
                  class="tableBox">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <!-- <el-table-column type="index" label="序号" width="50"></el-table-column> -->
                  <el-table-column prop="mat_id" label="素材ID" sortable="custom" width="100"></el-table-column>
                  <el-table-column prop="mat_name" show-overflow-tooltip label="名称" width="220" sortable="custom"></el-table-column>
                  <el-table-column prop="mat_sname" show-overflow-tooltip label="简称" width="120" sortable="custom"></el-table-column>
                  <el-table-column prop="mat_type" label="类型" sortable="custom" width="100">
                   <template v-slot="scope">
                     {{findValLabel(scope.row.mat_type, optionsType[0].children, 'mat_type_id', 'mat_type_name') || ''}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="use_channel" label="可用频道" width="150" sortable="custom" show-overflow-tooltip>
                    <template v-slot="scope">
                      {{
                        scope.row.use_channel != null ? scope.row.use_channel.split(',').map(item => {
                          return findValLabel(parseInt(item), optionsChannel[0].children, 'id', 'channel_name')
                        }).join() : ''
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="file_name" label="文件ID" width="150" sortable="custom"></el-table-column>
<!--                  <el-table-column prop="file_len" label="素材长度" width="120" sortable="custom">
                    <template v-slot="scope">
                      <time-picker inputType="readonly" v-model="scope.row.file_len" />
                    </template>
                  </el-table-column> -->
                  <el-table-column prop="file_len" label="文件长度" width="120" sortable="custom">
                    <template v-slot="scope">
                      <time-picker inputType="readonly" v-model="scope.row.file_len" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="markin" label="入点" width="120">
                    <template v-slot="scope">
                      <time-picker inputType="readonly" v-model="scope.row.markin" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="markout" label="出点" width="120">
                    <template v-slot="scope">
                      <time-picker inputType="readonly" v-model="scope.row.markout" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="date_limit" label="日期限制" width="80">
                    <template v-slot="scope">
                      {{scope.row.date_limit === 0 ? '-' : 'Y'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="s_date" label="开始日期" width="180">
                    <template v-slot="scope">
                      {{scope.row.s_date === '0' ? '' : scope.row.s_date}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="e_date" label="结束日期" width="180">
                    <template v-slot="scope">
                      {{scope.row.e_date === '0' ? '' : scope.row.e_date}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="can_play_num" label="可播次数" width="100"></el-table-column>
                  <el-table-column prop="al_play_num" label="已播次数" width="120" sortable="custom"></el-table-column>
                  <el-table-column prop="creator" label="创建人" width="120"></el-table-column>
                  <el-table-column prop="create_time" label="创建时间" width="160" sortable="custom"></el-table-column>
                  <el-table-column prop="check_flag" label="审核" width="80" sortable="custom">
                    <template v-slot="scope">
                      {{scope.row.check_flag === 0 ? '✔' : '×'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="check_man" label="审核人" width="120"></el-table-column>
                  <el-table-column prop="check_time" label="审核时间" width="120" sortable="custom">
                    <template v-slot="scope">
                      {{scope.row.check_time === '0' ? '' : scope.row.check_time}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="check_mind" label="审核意见" width="150"></el-table-column>
                  <el-table-column prop="remark" label="备注" width="150"></el-table-column>
                  <el-table-column prop="server" label="视频服务器" width="150"></el-table-column>
<!--              <el-table-column fixed="right" label="操作" width="120">
                    <template v-slot="scope">
                      <el-tooltip v-permission="permission.edit" class="item" effect="dark" content="编辑" placement="top" :enterable="false">
                        <el-link :underline="false" :id="scope.row.id" icon="el-icon-edit"  @click="editBeforeOpenDialog(scope.row)"></el-link>
                      </el-tooltip>
                      <el-tooltip v-permission="permission.edit" class="item" effect="dark" content="复制" placement="top" :enterable="false">
                        <el-link :underline="false" :id="scope.row.id" icon="el-icon-document-copy"  @click="copyCurrMatrial(scope.row)"></el-link>
                      </el-tooltip>
                      <el-tooltip v-permission="permission.edit" class="item" effect="dark" content="删除" placement="top" :enterable="false">
                        <el-link :underline="false" type="danger" icon="el-icon-delete"  @click="delCurrMaterial([scope.row.mat_id])"></el-link>
                      </el-tooltip>
                    </template>
                  </el-table-column> -->
                </el-table>
                <!-- 分页区域 -->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="queryInfo.pagenum"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="queryInfo.pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
                <ul id="ListDescription">
                  <li>共 {{total}} 条素材</li>
                  <li>总长度： <time-picker inputType="readonly" v-model="sumlength" format="HH:ii:ss" style="display: inline-block;" /></li>
                  <li>全部素材</li>
                  <li>luanzg</li>
                  <li>{{ todayDate + ' ' + week }}</li>
                  <li>{{ currtime }}</li>
                </ul>
                <el-dropdown @command="handleCommand" trigger="click" id="floatmousebox" ref="dropmenu" placement="bottom-start">
                  <span class="el-dropdown-link"></span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="edit" icon="el-icon-edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="copy" icon="el-icon-document-copy">复制</el-dropdown-item>
                    <el-dropdown-item command="del" icon="el-icon-delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
            <!-- 素材编辑弹窗 -->
            <el-dialog
              title="素材信息编辑"
              :visible.sync="matEditDialogVisible"
              width="680px"
              @close="matEditDialogClosed"
              :close-on-click-modal="false">
              <!-- 内容主体区域 -->
              <el-form :model="matEditObj" :rules="matEditRules" ref="matEditRef" label-width="90px" class="demo-ruleForm">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="文件ID" prop="file_name">
                      <div class="elInputS">
                        <el-input v-model="matEditObj.file_name" readonly></el-input>
                      </div>
                    </el-form-item>
                    <el-form-item label="名称" prop="mat_name">
                      <div class="elInputS">
                        <el-input placeholder="请输入" v-model="matEditObj.mat_name"></el-input>
                      </div>
                    </el-form-item>
                    <el-form-item label="简称">
                      <div class="elInputS">
                        <el-input disabled v-model="matEditObj.mat_sname"></el-input>
                      </div>
                    </el-form-item>
                    <el-form-item label="类型">
                      <div>
                        <el-cascader
                          v-model="matEditObj.mat_type"
                          :options="optionsType[0].children"
                          :props="{emitPath: false, value: 'mat_type_id', label: 'mat_type_name'}"
                          placeholder="请选择类型"
                          :show-all-levels="false"
                          style="margin-left: 0;"
                          class="elInputS">
                        </el-cascader>
                      </div>
                    </el-form-item>
                    <el-form-item>
                      <el-radio v-model="matEditObj.mat_format" :label="0">标清</el-radio>
                      <el-radio v-model="matEditObj.mat_format" :label="1">高清</el-radio>
                      <el-radio v-model="matEditObj.mat_format" :label="2">4K</el-radio>
                    </el-form-item>
                    <el-form-item label="入点">
                      <time-picker type="password" v-model="matEditObj.markin" @input="handleInputEvent" />
                    </el-form-item>
                    <el-form-item label="出点">
                      <time-picker type="password" v-model="matEditObj.markout" :fps4k="false" @input="handleInputEvent" />
                    </el-form-item>
                    <el-form-item label="素材长度">
                      <time-picker type="password" v-model="matEditObj.file_len" fps4k disabled @input="handleInputEvent" />
                    </el-form-item>
                    <el-form-item label="文件长度">
                      <time-picker type="password" v-model="matEditObj.file_len" disabled @input="handleInputEvent" />
                    </el-form-item>
                    <el-form-item label="创建人">
                      <el-input disabled v-model="matEditObj.creator"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间">
                      <el-input disabled v-model="matEditObj.create_time"></el-input>
                    </el-form-item>
                    <el-form-item label="审核">
                      <el-input disabled v-model="matEditObj.check_flag"></el-input>
                    </el-form-item>
                    <el-form-item label="审核人">
                      <el-input disabled v-model="matEditObj.check_man"></el-input>
                    </el-form-item>
                    <el-form-item label="审核时间">
                      <el-input disabled v-model="matEditObj.check_time"></el-input>
                    </el-form-item>
                    <el-form-item label="审核意见">
                      <el-input type="textarea" v-model="matEditObj.check_mind"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                      <el-input v-model="matEditObj.remark"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-card style="box-shadow: none !important;margin-bottom: 20px;">
                      <el-form-item>
                        <el-checkbox label="日期限制" v-model="matEditObj.date_limit" :true-label="1" :false-label="0"></el-checkbox>
                      </el-form-item>
                      <el-form-item label="开始日期">
                        <el-date-picker
                          value-format="yyyy-MM-dd"
                          style="width: 100%;"
                          v-model="matEditObj.s_date"
                          type="date"
                          :disabled="matEditObj.date_limit === 0"
                          placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="结束日期">
                        <el-date-picker
                          value-format="yyyy-MM-dd"
                          style="width: 100%;"
                          v-model="matEditObj.e_date"
                          type="date"
                          :disabled="matEditObj.date_limit === 0"
                          placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-card>
                    <el-form-item label="可播次数" label-width="70px">
                      <div class="elInputXS" style="width: 80px;display: inline-block;margin-right: 15px;">
                        <el-input type="number" v-model="matEditObj.can_play_num" min="0" max="100"></el-input>
                      </div>
                      <span>
                        (0 : 一直有效)
                      </span>
                    </el-form-item>
                    <el-row :gutter="20" style="margin-top: 15px;">
                      <el-col :span="12">
                        <el-form-item label="可用频道" label-width="70px">
                          <el-checkbox label="全选" :true-label="1" :false-label="0" @change="chkChannelSure"></el-checkbox>
                        </el-form-item>
                        <div>
                          <el-cascader-panel
                            v-model="matEditObj.use_channel"
                            class="formcascader"
                            :options="optionsChannel[0].children"
                            :props="{ multiple: 'false', value: 'id', label: 'channel_name', children: 'children', emitPath: false }">
                          </el-cascader-panel>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="存在服务器">
                        </el-form-item>
                        <div style="position: relative;">
                          <div class="model"></div>
                          <el-cascader-panel
                            class="formcascader"
                            :options="optionsSystem"
                            :props="{ multiple: 'false', value: 'value'}"
                            disabled>
                          </el-cascader-panel>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-form-item label="插播点" label-width="60px">
                        </el-form-item>
                        <div style="position: relative;" class="elbox">
                          <div class="model"></div>
                          <el-cascader-panel
                            class="formcascader"
                            style="height: 105px;"
                            :options="optionsSystem"
                            disabled>
                          </el-cascader-panel>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="SDT报警信息" label-width="100px">
                        </el-form-item>
                        <div style="position: relative;">
                          <div class="model"></div>
                          <el-cascader-panel
                            class="formcascader"
                            style="height: 105px;"
                            :options="optionsSystem"
                            disabled>
                          </el-cascader-panel>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-form>
              <!-- 底部区域 -->
              <span slot="footer" class="dialog-footer">
                <el-button @click="matEditDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="matEditSubmit">确 定</el-button>
              </span>
            </el-dialog>
          </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { matTlist } from '@/api/material/mattype.js'
import { channelMenuList } from '@/api/channel/channel.js'
import { materialEdit } from '@/api/material/material.js'
import commonMethods from '@/utils/commonMethods.js'
import tableTools from '@/components/tableToolsComponents' // tabs工具栏组件
export default {
  components: {
    tableTools
  },
  mixins: [commonMethods],
  data() {
    return {
      // 指令权限
      permission: {
        add: ['admin', 'matlist::add'],
        edit: ['admin', 'matlist::edit'],
        del: ['admin', 'matlist::delete'],
        list: ['admin', 'matlist::list']
      },
      activeName: '1', // 左侧激活折叠面板名称
      inputVal: 30259,
      loading: false, // 表格loading
      materialList: [], // 素材列表
      matEditObj: {}, // 素材编辑信息对象
      matEditRules: {
        mat_name: [
          { required: true, message: '素材名称不能为空', trigger: 'blur' }
        ]
      },
      handleCurrentRow: {}, // 当前单选选中的rows对象
      handleCheckboxRows: [], // 当前多选中选中行数组
      // 查询参数对象
      queryInfo: {
        query: '',
        status: 'all', // 素材状态
        // 当前的页数
        pagenum: 1,
        // 当前每页显示数目
        pagesize: 20,
        type: [], // 类型
        ordername: '', // 排序字段
        order: '' // 排序
      },
      total: 0, // 当前列表记录数
      sumlength: 0, // 素材长度
      todayDate: '', // 今天日期
      week: '', // 今天星期几
      currtime: '', // 当前时间
      currtimeTimer: null, // 当前时间的 定时器引用

      drawerVisible: true,
      matEditDialogVisible: false, // 素材编辑窗显示状态
      matColumnVisibleDialog: false, // 素材显示字段
      optionsType: [
        { children: [] }
      ],
      optionsSystem: [{
        label: '视频服务器',
        value: 'all',
        children: [
          { value: 'master', label: '主服务器' },
          { value: 'backup', label: '备服务器' }
        ]
      }],
      optionsChannel: [{
        channel_name: '频道',
        id: '',
        children: []
      }],
      optionsStatus: [
        { value: 'all', label: '所有的素材' },
        { value: 'plalist', label: '节目单使用的素材' },
        { value: 'unenable', label: '未使用的素材' },
        { value: 'lasttime', label: '过期的素材' },
        { value: 'cancel', label: '无效的素材' },
        { value: 'delete', label: '垃圾箱的素材' }
      ]
    }
  },
  async created() {
    document.oncontextmenu = function (event) {
      // 阻止页面浏览器右键菜单事件
      event.preventDefault()
    }
    // 获取节目类型菜单
    this.getmatTypeList()
    // 获取频道菜单
    this.optionsChannel[0].children = await channelMenuList()
  },
  mounted() {
    this.getmaterialList() // 获取素材列表

    // 获取系统时间信息
    this.currtimeTimer = setInterval(() => {
      this.currtime = this.$commonFun.dateFormat(Date.now(), 'hms')
    }, 1000)
    this.todayDate = this.$commonFun.dateFormat(Date.now(), 'ymd')
    this.week = this.$commonFun.dateFormat(Date.now(), 'w')
    console.log(this.$refs.singleTable)
  },
  destroyed() {
    clearInterval(this.currtimeTimer)
    this.currtimeTimer = null

    // 释放右键菜单
    document.oncontextmenu = function (event) {
      // event.preventDefault()
    }
  },
  watch: {
    queryInfo() {
      this.getmaterialList()
    },
    'queryInfo.status'() {
      this.getmaterialList()
    }
  },
  methods: {
    getmatTypeList() {
      matTlist().then(res => {
        if (res.status !== 200) {
          console.log('获取失败')
        }
        this.optionsType = res.data.data
      })
    },
    handleInputEvent() {
      console.log(this.inputVal)
      console.log('输入中')
    },

    // 获取素材列表方法
    async getmaterialList() {
      this.loading = true
      const { data: res } = await this.$http.get('matlist', {
        params: this.queryInfo
      })
      this.loading = false
      if (res.meta.status !== 200) {
        return this.$message.error('获取素材列表失败！')
      }
      // console.log(res.data.list)
      this.materialList = res.data.list
      this.total = res.data.total
      this.sumlength = res.data.sumlength
    },
    // 监听列表工具搜索change事件
    searchChange(val) {
      this.drawerVisible = val
    },
    // 监听列表工具栏 刷新点击事件
    refreshClick() {
      // window.location.reload()
      this.getmaterialList()
    },
    // 监听pagesize 改变的事件
    handleSizeChange(nesSize) {
      this.queryInfo.pagesize = nesSize
      this.getmaterialList()
    },

    // 监听 当前页码数改变事件
    handleCurrentChange(currPage) {
      this.queryInfo.pagenum = currPage
      this.getmaterialList()
    },

    // 列表单选行变化对行元素进行存储
    rowsCurrentChange(val) {
      this.handleCurrentRow = val
    },

    // 监听table列表多选checkbox多选变化事件
    handleSelectionChange(select) {
      this.handleCheckboxRows = select || []
    },

    // 当表格单元行被鼠标右键点击时触发事件
    mouseRightUp(row, column, event) {
      this.$refs.dropmenu.visible = false
      this.$refs.table.setCurrentRow(row) // 用于单选表格，设定单元行为选中行

      // 设定操作栏浮窗相对页面位置,并显示ss。
      const dom = document.getElementById('floatmousebox')
      dom.style.left = event.clientX + 20 + 'px'
      dom.style.top = event.clientY + 'px'
      this.$refs.dropmenu.show()

      this.handleCurrentRow = row // 缓存当前右键选中行
    },

    // 单元行双击事件
    rowsdbClick(row, column, event) {
      this.handleCurrentRow = row
      this.editBeforeOpenDialog(this.handleCurrentRow)
    },

    // 列表操作栏下拉菜单指令触发方法
    handleCommand(commond) {
      switch (commond) {
        case 'edit':
          this.editBeforeOpenDialog(this.handleCurrentRow)
          break
        case 'copy':
          this.copyCurrMatrial(this.handleCurrentRow)
          break
        case 'del':
          this.delCurrMaterial([this.handleCurrentRow.mat_id])
          break
      }
      // console.log(commond, this.handleCurrentRow)
    },
    // 编辑前打开dialog事件
    editBeforeOpenDialog(row) {
      this.matEditDialogVisible = true
      this.matEditObj = JSON.parse(JSON.stringify(row))
      this.matEditObj.use_channel = this.matEditObj.use_channel != null ? this.matEditObj.use_channel.split(',') : []
      this.matEditObj.s_date = [...this.matEditObj.s_date].length > 1 ? this.matEditObj.s_date : this.$commonFun.dateFormat(Date.now(), 'ymdhms')
      this.matEditObj.e_date = [...this.matEditObj.e_date].length > 1 ? this.matEditObj.e_date : this.$commonFun.dateFormat(Date.now(), 'ymdhms')
    },

    // 素材复制
    async copyCurrMatrial(row) {
      const confirmresult = await this.$confirm('是否确定复制当前素材【' + row.mat_name + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmresult !== 'confirm') {
        return this.$message.info('您取消了复制操作')
      }
      const { data: res } = await this.$http.post('matadd', row)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.message)
      }

      this.getmaterialList() // 重新刷新页面
      return this.$message.success('复制成功')
    },

    // 批量删除处理
    delCheckMaterial(rows) {
      if (rows.length < 1) {
        return this.$message.error('至少选中一项！')
      }
      const arr = []
      rows.map(item => arr.push(item.mat_id))
      this.delCurrMaterial(arr)
    },

    // 素材删除
    async delCurrMaterial(idArr) {
      const confirmresult = await this.$confirm('是否删除当前选中素材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmresult !== 'confirm') {
        return this.$message.info('您已取消了删除')
      }

      const { data: res } = await this.$http.post('matdel', { mat_id: idArr.join() })

      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.message)
      }

      this.getmaterialList() // 重新刷新页面
      return this.$message.success('删除成功')
    },

    // 素材编辑弹框表单提交方法
    matEditSubmit() {
      this.$refs.matEditRef.validate(async valid => {
        if (!valid) return
        console.log(this.matEditObj)
        materialEdit(this.matEditObj).then(res => {
          if (res.data.meta.status !== 200) {
            return this.$message.error(res.data.meta.message)
          }
          this.getmaterialList() // 重新刷新页面
          return this.$message.success('编辑成功!')
        })
      })
      this.matEditDialogVisible = false
    },

    // 高级搜索按钮触发显示搜索表单
    handledrawerVisible() {
      this.drawerVisible = !this.drawerVisible
    },

    // 列表字段排序触发监听回调
    handleSortChange(column) {
      this.queryInfo.ordername = column.prop
      this.queryInfo.order = column.order
      console.log(column)
      this.getmaterialList()
    },

    // 素材编辑弹框关闭事件监听
    matEditDialogClosed() {
      this.matEditObj = {} // 清空当前弹窗编辑信息对象
      console.log('dialog close')
    },

    // 监听编辑页中的全选按钮
    chkChannelSure(val) {
      this.matEditObj.use_channel = []
      if (val === 1) {
        this.optionsChannel.map(item => {
          this.matEditObj.use_channel.push(item.value)
        })
      }
    },

    // 按类型查看
    handleTypeClick(data, node, el) {
      if (this.$refs.treeone.currentNode != null) {
        this.$refs.treeone.currentNode.$el.setAttribute('class', 'el-tree-node')
      }

      /*      if (this.$refs.treetwo.currentNode != null) {
        this.$refs.treetwo.currentNode.$el.setAttribute('class', 'el-tree-node')
      } */

      if (this.$refs.treethree.currentNode != null) {
        this.$refs.treethree.currentNode.$el.setAttribute('class', 'el-tree-node')
      }

      el.$el.setAttribute('class', 'el-tree-node is-current is-focusable') // 设置选中
      this.queryInfo.type[0] = el.tree.props.type || ''
      console.log(this.queryInfo.type[0])
      switch (this.queryInfo.type[0]) {
        case 'use_channel':
          if (data.id === undefined) {
            this.queryInfo.type[1] = ''
          } else {
            this.queryInfo.type[1] = data.id
          }
          break
        default:
          if (data.mat_type_id === undefined) {
            this.queryInfo.type[1] = 'all'
          } else {
            this.queryInfo.type[1] = this.findNodeChildValArr(data, 'mat_type_id', []).join(',')
          }
      }
      this.getmaterialList()
    }
  }
}
</script>

<style lang="less" scoped>
  .leftBox {height: 100%; width: 100%;}
  .tableBox {
    margin-top: 15px;
  }
  .el-cascader {margin-right: 15px;}
  .el-form-item {
    margin-bottom: 3px !important;
  }
  .el-cascader-panel { overflow: hidden; height: 150px; }
  .model { position: absolute; width: 100%; height: 100%; z-index: 2; }
  .el-link {
    margin: 0 5px;
  }
  .el-link:first-of-type {margin-left: 15px;}

  #ListDescription {
    list-style: none;
    display: flex;
    position: absolute;
    bottom: 50px;
    right: 0;

    li {
      padding: 0 10px;
      color: #666;
      font-size: 13px;
    }
  }
  #floatmousebox {
    position: fixed;
  }
</style>
